<template>
  <div class="page-container login-page">
    <div class="form-warpper">
      <div class="title mb-20">
        <img src="/icon.svg" alt="" />
        <h1>- Element Admin -</h1>
        <p>基于Element Plus搭建的中后台管理模板</p>
      </div>
      <el-form :model="form" :rules="rules" ref="loginForm" hide-required-asterisk label-width="0px">
        <el-form-item prop="account">
          <div class="account-input input">
            <el-input v-model="form.account" placeholder="请输入账号">
              <template #prefix>
                <Avatar :size="16" />
              </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="password-input input">
            <el-input v-model="form.password" :type="showPwd ? 'text' : 'password'" placeholder="请输入密码">
              <template #prefix>
                <PreviewOpen :size="16" v-if="showPwd" style="cursor: pointer" @click="showPwd = false" />
                <PreviewClose :size="16" v-else style="cursor: pointer" @click="showPwd = true" />
              </template>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <div class="check mb-20">
        <el-checkbox v-model="rememberPassword" label="记住密码"></el-checkbox>
        <a class="link">忘记密码?</a>
      </div>
      <el-button size="large" class="custm-button" type="primary" @click="_login" :loading="loading"
        >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button
      >
      <div class="other-login mt-20">
        <div>其他登陆方式</div>
        <div class="icon">
          <svg viewBox="0 0 1024 1024" width="20" height="20">
            <path
              d="M246.232615 570.171077c-11.342769 9.137231-23.512615 22.370462-26.939077 39.305846-4.726154 23.04-0.984615 51.987692 21.307077 74.633846 26.939077 27.451077 67.977846 34.973538 85.740308 36.273231 48.128 3.465846 99.406769-20.361846 138.043077-47.616a303.852308 303.852308 0 0 0 65.929846-65.260308c-55.571692-28.632615-124.928-60.416-199.010461-57.26523-38.124308 1.575385-65.260308 9.452308-85.07077 19.928615z m704.512 126.818461c24.536615-57.501538 38.124308-120.792615 38.124308-187.234461C988.868923 245.563077 773.907692 30.601846 509.755077 30.601846 245.484308 30.72 30.601846 245.641846 30.601846 509.833846c0 264.192 214.961231 479.153231 479.153231 479.153231 159.507692 0 300.898462-78.296615 388.017231-198.498462-82.392615-41.038769-218.112-108.307692-301.764923-149.149538-39.857231 45.449846-98.855385 90.978462-165.533539 110.907077-41.905231 12.406154-79.556923 17.250462-118.980923 9.176615-39.108923-7.995077-67.859692-26.269538-84.676923-44.583384a160.216615 160.216615 0 0 1-25.403077-35.446154c0.630154 1.851077 1.063385 2.914462 1.063385 2.914461s-4.096-7.010462-7.207385-18.195692a90.820923 90.820923 0 0 1-3.347692-29.184 85.070769 85.070769 0 0 1 1.614769-22.528 114.412308 114.412308 0 0 1 32.964923-61.44c45.883077-44.937846 107.362462-47.419077 139.264-47.222154 47.143385 0.236308 129.220923 20.873846 198.262154 45.371077 19.140923-40.723692 31.310769-84.322462 39.305846-113.309538H316.337231v-30.995693h147.416615V344.772923H285.184v-31.035077h178.451692V251.392c0-8.507077 1.732923-15.517538 15.517539-15.517538h69.789538v77.548307h193.969231v30.995693H549.021538v62.030769h155.175385s-15.635692 86.921846-64.315077 172.504615c108.150154 38.675692 260.214154 98.264615 310.823385 118.075077z"
              fill="#28AAE7"></path>
          </svg>
        </div>
        <div class="icon">
          <svg viewBox="0 0 1024 1024" width="20" height="20">
            <path
              d="M347.729118 353.0242c-16.487119 0-29.776737 13.389539-29.776737 29.776737S331.241998 412.677596 347.729118 412.677596s29.776737-13.389539 29.776737-29.776737-13.289617-29.876659-29.776737-29.876659zM577.749415 511.800156c-13.689305 0-24.880562 11.091335-24.880563 24.880562 0 13.689305 11.091335 24.880562 24.880563 24.880562 13.689305 0 24.880562-11.191257 24.880562-24.880562s-11.191257-24.880562-24.880562-24.880562zM500.909446 412.677596c16.487119 0 29.776737-13.389539 29.776737-29.776737s-13.389539-29.776737-29.776737-29.776737c-16.487119 0-29.776737 13.389539-29.776737 29.776737s13.289617 29.776737 29.776737 29.776737zM698.455113 511.600312c-13.689305 0-24.880562 11.091335-24.880562 24.880562 0 13.689305 11.091335 24.880562 24.880562 24.880562 13.689305 0 24.880562-11.091335 24.880562-24.880562-0.099922-13.689305-11.191257-24.880562-24.880562-24.880562z"
              fill="#00C800"
              p-id="5297"></path>
            <path
              d="M511.601093 0.799375C229.12178 0.799375 0.000781 229.820453 0.000781 512.399688s229.021077 511.600312 511.600312 511.600312 511.600312-229.021077 511.600312-511.600312S794.180328 0.799375 511.601093 0.799375z m-90.229508 634.504294c-27.37861 0-49.361436-5.595628-76.839969-10.991413l-76.640125 38.469945 21.882904-65.948477c-54.957065-38.370023-87.73146-87.831382-87.73146-148.084309 0-104.318501 98.722873-186.554254 219.32865-186.554255 107.815769 0 202.34192 65.648712 221.327088 153.979703-6.994536-0.799375-13.989071-1.298985-21.083529-1.298985-104.118657 0-186.454333 77.739266-186.454332 173.564403 0 15.98751 2.498048 31.275566 6.794692 45.964091-6.794692 0.599532-13.689305 0.899297-20.583919 0.899297z m323.547228 76.839969l16.48712 54.757221-60.153006-32.874317c-21.882904 5.495706-43.965652 10.991413-65.848555 10.991413-104.318501 0-186.554254-71.344262-186.554255-159.175644 0-87.631538 82.135831-159.175644 186.554255-159.175644 98.523029 0 186.254489 71.444184 186.254488 159.175644 0.099922 49.461358-32.774395 93.227166-76.740047 126.301327z"
              fill="#00C800"></path>
          </svg>
        </div>
        <div class="icon">
          <svg viewBox="0 0 1024 1024" width="20" height="20">
            <path
              d="M512.874146 15.484878c-275.880585 0-499.512195 223.656585-499.512195 499.512195 0 275.905561 223.63161 499.512195 499.512195 499.512195s499.512195-223.606634 499.512195-499.512195c0-275.85561-223.63161-499.512195-499.512195-499.512195z m231.473952 433.052098c-0.999024 4.345756-3.596488 10.789463-7.192976 18.481951h0.099902l-0.399609 0.749268c-20.979512 44.856195-75.726049 132.870244-75.726049 132.870244l-0.249756-0.599415-15.98439 27.872781h77.074731l-147.256195 195.758829 33.467317-133.169951h-60.690732l21.079415-88.064c-17.033366 4.096-37.213659 9.740488-61.090341 17.432976 0 0-32.268488 18.881561-93.009171-36.364488 0 0-40.96-36.114732-17.18322-45.105951 10.090146-3.846244 49.002146-8.741463 79.622244-12.837464 41.459512-5.594537 66.884683-8.59161 66.884683-8.59161s-127.625366 1.898146-157.895805-2.847219c-30.270439-4.745366-68.682927-55.296-76.874926-99.702634 0 0-12.637659-24.376195 27.223414-12.837464 39.861073 11.538732 204.849951 44.956098 204.849951 44.956098s-214.540488-65.785756-228.876487-81.870049c-14.286049-15.98439-42.008976-87.614439-38.412488-131.571512 0 0 1.548488-10.989268 12.837463-7.992195 0 0 158.645073 72.429268 267.089171 112.140488 108.494049 39.71122 202.801951 59.891512 190.613854 111.291317z"
              fill="#3AA2EB"></path>
          </svg>
        </div>
        <a class="ml-auto link" href="https://gitee.com/stop-chen/element-admin" target="_blank">源码地址<Link /> </a>
      </div>
    </div>
    <starry-bg />
  </div>
</template>

<script setup lang="ts">
import starryBg from './components/starry-bg.vue';
import { useUserStore } from '@/store';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/mocks/login';
import { Avatar, PreviewClose, PreviewOpen, Link } from '@icon-park/vue-next';
import { ElMessage, FormRules } from 'element-plus';

const router = useRouter();

const { setUserInfo } = useUserStore();

const loading = ref(false);
const showPwd = ref(false);
const loginForm = ref();
const form = ref({
  account: 'admin',
  password: '123456'
});

const validatePass = (rule: any, value: any, callback: any) => {
  if (value.length < 6) {
    return callback(new Error('密码长度最少6位数'));
  }
  return callback();
};

const rules = reactive<FormRules<any>>({
  account: { required: true, message: '请输入账号', trigger: 'blur' },
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' }
  ]
});

const rememberPassword = ref(false);

function _login() {
  loginForm.value.validate((val: boolean) => {
    if (!val) return;
    loading.value = true;
    login(form.value)
      .then((res) => {
        loading.value = false;
        setUserInfo(res.data);
        next();
      })
      .catch((_) => {
        loading.value = false;
        ElMessage.error('账号或密码错误');
      });
  });
}
function next() {
  let source_name = sessionStorage.getItem('source_name');
  router.push({ name: source_name ?? 'home' });
  sessionStorage.removeItem('source_name');
}
</script>

<style scoped lang="scss">
.login-page {
  padding: 0 80px;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  overflow: hidden;
}

.form-warpper {
  width: 420px;
  padding: 0 40px 40px;
  position: relative;
  z-index: 2;
  border-radius: 2px;
  background-color: #fff;

  .title {
    text-align: center;

    h1 {
      font-size: 24px;
      font-weight: 900;
      color: var(--el-color-primary);
      text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 2px 2px 4px #333;
    }

    img {
      margin-top: -40px;
      width: 80px;
      filter: drop-shadow(0 0 3px #fff);
    }

    p {
      margin-top: 8px;
      font-size: 12px;
      color: #999;
    }
  }

  .input {
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f3fb;
    border-radius: 4px;

    .el-input {
      border: 0;
      height: 100%;
      background-color: transparent;

      &:deep(input) {
        background-color: transparent;
      }
    }
  }
  .custm-button {
    width: 100%;
  }

  .check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
  }

  .other-login {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;

    .icon {
      display: flex;
      cursor: pointer;
    }
  }
}
</style>
